<!DOCTYPE html>
<html>

<head lang="en">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <title>达达商城品类页</title>
  <link rel="icon" href="../static/images/index/py.ico">
  <link rel="stylesheet" href="../static/css/index.css">
  <link rel="stylesheet" href="../static/css/base.css">
  <link rel="stylesheet" href="../static/css/products.css">
  <script src="../static/js/init.js"></script>
</head>

<body>
  <header id="header"></header>
  <!-- banner部分-->
  <div class="store">
    <img src="../static/images/list/gulid.jpg">
  </div>

  <!-- -->
  <div class="store_action">
    <div class="store_action_left">
      <div class="store_action_left_content">
        <div id="plist">
          <div class="salc_top">
            全部产品
          </div>

          <div class="salc_content">
             <div class="product" id="1">
              <a href="product_details.html">
                <img src="../static/images/list/product_1.png" alt="复古背包">
              </a>
              <div class="addRemoveProduct">
                <p>
                  <span class="price">￥698.00</span>
                  <a href="product_details.html" class="title" title="复古背包">
                    复古双肩背包
                  </a>
                </p>
                <div>
                  <span class="reduc lf">-</span>
                  <input type="text" value="1" class="lf">
                  <span class="add lf">+</span>
                  <div class="addcart">
                    加入购物车
                  </div>
                </div>
              </div>
            </div>
            <!--分页条-->
          </div>
          <div class="pager">
              <a href="javascript:;" class="disabled" id="previous">上一页</a>
            <div id="btnBox" style="display: inline-block;">
              <a href="javascript:;" class="current">1</a>
              <a href="javascript:;" class="tcdNumber">2</a>
              <a href="javascript:;" class="tcdNumber">3</a>
            </div>
            <a href="javascript:;" class="nextPage" id="next">下一页</a>
          </div>
        </div>
      </div>


      <div class="store_action_right rt">
        <div class="store_action_right_top">
          <p><img src="../static/images/list/foodstore_icon2.png" alt="">商家公告</p>
          <div>
            <p>皮爷皮爷</p>
            <p>英明神武</p>
            <p>千秋万代</p>
            <p>一统江湖</p>
          </div>
        </div>
        <div class="store_action_right_cart" style="position: absolute; top: 300px;">
          <div class="store_action_right_cart_top">
            购物车 <span class="clear rt">清空</span>
          </div>
          <div class="store_action_right_cart_content">
            <div></div>
        <div id="5">
        <span>精选双人餐</span>
        <div><span class="cart_reduc lf">-</span><input type="text" value="1" class="lf"/><span class="cart_add lf">+</span></div>
        <span class="rt pc">￥:<span class="cart_unit_price">20.00</span></span>
        </div>
         </div>
          <div class="sarc">
            <div class="total_price lf">
              <img src="../static/images/list/foodstore_car_2.png" alt="">￥:<span>0.00</span>
            </div>
            <div class="settle lf">
              <a href="http://www.codeboy.com/cart.html" style="color:#fff;">去结算</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--商家-->
  </div>
  <footer id="footer"></footer>

  <script src="../static/js/jquery-3.1.1.min.js"></script>
  <script src="../static/js/jquery.page.js"></script>
  <!-- <script src="../js/base.js"></script> -->
<!--  <script src='../static/js/index.js'></script>-->
  <!-- <script src="../js/products.js"></script> -->
  <script>
    $('#header').load('header.html');
    $('#footer').load('footer.html');
  </script>

  <script>
    (function ($) {
      $.getUrlParam = function (name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return r;
        return null;
      }

    })(jQuery);

    $(function () {
      var catalog_id = $.getUrlParam('catalog_id')[2]
      window.localStorage.setItem('catalog_id',catalog_id)
      window.localStorage.setItem('canload',true)
      if (window.localStorage.canload){
        $.ajax({
        type: "get",
        url:baseUrl+'/v1/goods/catalogs/'+catalog_id+'?launched=true&page=1',
        success: function (result) {
          if (result.code==200){
            var IMG_URL = result.base_url
            var html = ''
            var pages = Math.ceil(result.paginator.total / result.paginator.pagesize)
            window.localStorage.setItem('pageMax',pages)
            html += '<a href="javascript:;" class="current">1</a>'
            for (var j=2;j<=pages;j++){
              html += '<a href="javascript:;" class="tcdNumber">'+j+'</a>'
            }
            $('#btnBox').html(html);

            var list = ''
            result.data.forEach(el => {
              list += '<div class="product" id="' + el.skuid +
                '"><a href='+"product_details.html?skuid="+el.skuid+'>'
              list += '<img src="' + IMG_URL+el.image + '" alt="' + el.name + '"></a>'
              list += '<div class="addRemoveProduct">'
              list += '<p>'
              list += '<span class="price">￥' + el.price + '</span>'
              list += '<a href='+"product_details.html?skuid="+el.skuid+' class="title" title='+el.name+'>'+el.name+'</a></p></div></div>'
            });
            $('.salc_content').html(list)
            window.localStorage.setItem('canload',false)

          }
        },

        error: function (data) {
          console.log(data)
        }
     })
      }
    });




    class btnList{
      constructor( btnBox , previous , next ){
        /**
         * @this {Element} btnBox   [按钮父元素]
         * @this {Number}  page     [当前页]
         * @this {Array}   btnList  [当前按钮集合]
         * @this {Element} previous [上一页]
         * @this {Element} next     [下一页]
         * @this {Object}  listData [缓存请求数据]
         * @this {Numnber} index    [当前元素于btnList的下标]
         * @this {Boolean} nextFlag [判断下一页是否存在数据]
         */
        this.btnBox = btnBox;
        this.page = 1;
        this.btnList = null;
        this.previous = previous;
        this.next = next;
        this.listData = new Map();
        this.index = 0;
        this.PageMax = window.localStorage.pageMax;
        this.catalog_id = window.localStorage.catalog_id
      }
      init(){
        console.log(this.catalog_id)
        this.btnList = [].slice.call( this.btnBox.children );
        this.register();
      }
      register(){
        /* 注册点击事件 */
        this.previous.addEventListener( 'click' , ()=>{this.previousPage()} , false );
        this.next.addEventListener( 'click' , ()=>{this.nextPage()} , false );
        this.btnBox.addEventListener( 'click' , e=>{this.handleClickBtn(e)} , false );
      }
      previousPage(){
        /* 上一页处理函数 */
        if( this.page < 2 ){
          return
        }
        if( this.index < 1 ){
          this.btnList.forEach( item => {
            item.innerHTML = Number(item.innerHTML) - 1;
          })
        };
        this.page--;
        this.index--;
        if( this.index < 1 ){
          this.index = 0;
        }
        let elm = this.btnList[this.index];
        this.handleClick( elm );
      }
      nextPage(){
        /* 下一页处理函数 */
        if(this.page == this.PageMax){
            alert('已经是最后一页了！')
            return
        }
        if( this.index >= this.btnList.length-1 ){
          this.btnList.forEach( item => {
            item.innerHTML = Number(item.innerHTML) + 1;
          })
        };
        this.page++;
        this.index++;
        if( this.index > this.btnList.length - 1 ){
          this.index = this.btnList.length -1;

        }
        let elm = this.btnList[this.index];
        this.handleClick( elm );
      }
      handleClickBtn(e){
        /* btn处理函数 */
        let target = e.target;
        if( target.nodeName !== 'A' ){
          return
        }
        let index = this.btnList.indexOf( target );
        let page = target.innerHTML;
        this.page = page;
        this.index = index;
        this.handleClick( target );
      }
      handleClick( elm ){
        this.ajax();
        /* 删除btn current样式*/
        this.btnList.forEach( item => {
          item.classList.remove( 'current' );
        });
        /* 为当前点击元素 添加current */
        elm.classList.add( 'current' );
      }
      // ajax(){
      //   console.log('ajax....')
      // }
      ajax(){
         $.ajax({
         type: "get",
         url:baseUrl+'/v1/goods/catalogs/'+this.catalog_id+'?launched=true&page='+this.page,
         success: function (result) {
          if (result.code==200){
            var list = ''
            const BASE_URL = result.base_url
            result.data.forEach(el => {
              list += '<div class="product" id="' + el.skuid +
                '"><a href='+"product_details.html?skuid="+el.skuid+'>'
              list += '<img src="' + BASE_URL+el.image + '" alt="' + el.name + '"></a>'
              list += '<div class="addRemoveProduct">'
              list += '<p>'
              list += '<span class="price">￥' + el.price + '</span>'
              list += '<a href='+"product_details.html?skuid="+el.skuid+' class="title" title='+el.name+'>'+el.name+'</a></p></div></div>'
            });
            $('.salc_content').html(list)
          }else {
              alert(result.error)
          }
        },

        error: function (data) {
          console.log(data)
        }
     })
      }
    }

    setTimeout(new btnList($('#btnBox')[0],$('#previous')[0],$('#next')[0]).init(),2000);




  </script>
</body>

</html>
